<template>
  <view class="fu-datetime-picker">
    <fu-popup
      v-model:show="localVisible"
      position="bottom"
    >
      <!-- 标题栏 -->
      <view class="fu-datetime-picker__header">
        <text 
          class="fu-datetime-picker__cancel"
          @click="onCancel"
        >取消</text>
        <text class="fu-datetime-picker__title">{{ title }}</text>
        <text 
          class="fu-datetime-picker__confirm"
          @click="onConfirm"
        >确定</text>
      </view>
      
      <!-- 选择器主体 -->
      <picker-view
        :value="currentValue"
        class="fu-datetime-picker__body"
        :indicator-class="'fu-datetime-picker__indicator'"
        :mask-class="'fu-datetime-picker__mask'"
        @change="onChange"
      >
        <!-- 年份列 -->
        <picker-view-column v-if="showYear">
          <view 
            v-for="(year, index) in years"
            :key="index"
            class="fu-datetime-picker__item"
          >{{ year }}年</view>
        </picker-view-column>
        
        <!-- 月份列 -->
        <picker-view-column v-if="showMonth">
          <view 
            v-for="(month, index) in months"
            :key="index"
            class="fu-datetime-picker__item"
          >{{ month }}月</view>
        </picker-view-column>
        
        <!-- 日期列 -->
        <picker-view-column v-if="showDay">
          <view 
            v-for="(day, index) in days"
            :key="index"
            class="fu-datetime-picker__item"
          >{{ day }}日</view>
        </picker-view-column>
        
        <!-- 小时列 -->
        <picker-view-column v-if="showHour">
          <view 
            v-for="(hour, index) in hours"
            :key="index"
            class="fu-datetime-picker__item"
          >{{ hour }}时</view>
        </picker-view-column>
        
        <!-- 分钟列 -->
        <picker-view-column v-if="showMinute">
          <view 
            v-for="(minute, index) in minutes"
            :key="index"
            class="fu-datetime-picker__item"
          >{{ minute }}分</view>
        </picker-view-column>
      </picker-view>
    </fu-popup>
  </view>
</template>

<script>
/**
 * fu-datetime-picker 日期时间选择器
 * @description 日期时间选择器，支持日期、时间等多种格式
 * @property {Boolean} show - 是否显示选择器
 * @property {String} title - 选择器标题
 * @property {String} type - 选择器类型，可选值：datetime/date/time/year-month
 * @property {String, Number} value - 选中值，时间戳或日期字符串
 * @property {String, Number} minDate - 最小日期，时间戳或日期字符串
 * @property {String, Number} maxDate - 最大日期，时间戳或日期字符串
 * @event {Function} confirm - 点击确定按钮时触发
 * @event {Function} cancel - 点击取消按钮时触发
 * @event {Function} change - 选项改变时触发
 */
export default {
  name: 'fu-datetime-picker',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '选择日期'
    },
    type: {
      type: String,
      default: 'datetime',
      validator: value => ['datetime', 'date', 'time', 'year-month'].includes(value)
    },
    value: {
      type: [String, Number],
      default: ''
    },
    minDate: {
      type: [String, Number],
      default: new Date(new Date().getFullYear() - 10, 0, 1).getTime()
    },
    maxDate: {
      type: [String, Number],
      default: new Date(new Date().getFullYear() + 10, 11, 31).getTime()
    }
  },
  emits: ['update:show', 'confirm', 'cancel', 'change'],
  data() {
    return {
      localVisible: false,
      currentValue: [],
      currentDate: null
    }
  },
  computed: {
    // 是否显示年份列
    showYear() {
      return ['datetime', 'date', 'year-month'].includes(this.type)
    },
    // 是否显示月份列
    showMonth() {
      return ['datetime', 'date', 'year-month'].includes(this.type)
    },
    // 是否显示日期列
    showDay() {
      return ['datetime', 'date'].includes(this.type)
    },
    // 是否显示小时列
    showHour() {
      return ['datetime', 'time'].includes(this.type)
    },
    // 是否显示分钟列
    showMinute() {
      return ['datetime', 'time'].includes(this.type)
    },
    // 年份列表
    years() {
      const minYear = new Date(Number(this.minDate)).getFullYear()
      const maxYear = new Date(Number(this.maxDate)).getFullYear()
      const years = []
      for (let i = minYear; i <= maxYear; i++) {
        years.push(i)
      }
      return years
    },
    // 月份列表
    months() {
      return Array.from({ length: 12 }, (_, i) => i + 1)
    },
    // 日期列表
    days() {
      if (!this.currentDate) return []
      const year = this.currentDate.getFullYear()
      const month = this.currentDate.getMonth() + 1
      const days = new Date(year, month, 0).getDate()
      return Array.from({ length: days }, (_, i) => i + 1)
    },
    // 小时列表
    hours() {
      return Array.from({ length: 24 }, (_, i) => i)
    },
    // 分钟列表
    minutes() {
      return Array.from({ length: 60 }, (_, i) => i)
    }
  },
  watch: {
    show: {
      handler(val) {
        this.localVisible = val
        if (val) {
          this.updateCurrentValue()
        }
      },
      immediate: true
    },
    localVisible(val) {
      this.$emit('update:show', val)
    }
  },
  methods: {
    // 更新当前值
    updateCurrentValue() {
      const date = this.value ? new Date(Number(this.value)) : new Date()
      this.currentDate = date
      
      const values = []
      if (this.showYear) {
        values.push(this.years.indexOf(date.getFullYear()))
      }
      if (this.showMonth) {
        values.push(date.getMonth())
      }
      if (this.showDay) {
        values.push(date.getDate() - 1)
      }
      if (this.showHour) {
        values.push(date.getHours())
      }
      if (this.showMinute) {
        values.push(date.getMinutes())
      }
      
      this.currentValue = values
    },
    // 处理选择变化
    onChange(event) {
      const { value } = event.detail
      const date = new Date()
      
      let valueIndex = 0
      if (this.showYear) {
        date.setFullYear(this.years[value[valueIndex]])
        valueIndex++
      }
      if (this.showMonth) {
        date.setMonth(value[valueIndex])
        valueIndex++
      }
      if (this.showDay) {
        date.setDate(value[valueIndex] + 1)
        valueIndex++
      }
      if (this.showHour) {
        date.setHours(value[valueIndex])
        valueIndex++
      }
      if (this.showMinute) {
        date.setMinutes(value[valueIndex])
      }
      
      this.currentDate = date
      this.$emit('change', date.getTime())
    },
    // 确认选择
    onConfirm() {
      this.$emit('confirm', this.currentDate.getTime())
      this.localVisible = false
    },
    // 取消选择
    onCancel() {
      this.$emit('cancel')
      this.localVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-datetime-picker {
  &__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 32rpx;
    background-color: #f7f8fa;
  }
  
  &__title {
    font-size: 28rpx;
    color: var(--fu-text-color);
  }
  
  &__cancel,
  &__confirm {
    padding: 20rpx 0;
    font-size: 28rpx;
    
    &:active {
      opacity: 0.7;
    }
  }
  
  &__cancel {
    color: var(--fu-text-color-secondary);
  }
  
  &__confirm {
    color: var(--fu-primary-color);
  }
  
  &__body {
    width: 100%;
    height: 440rpx;
  }
  
  &__mask {
    position: relative;
    
    &::before,
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 176rpx;
      pointer-events: none;
      z-index: 1;
    }
    
    &::before {
      top: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
    }
    
    &::after {
      bottom: 0;
      background: linear-gradient(0deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
    }
  }
  
  &__indicator {
    height: 88rpx;
    border-top: 2rpx solid var(--fu-border-color);
    border-bottom: 2rpx solid var(--fu-border-color);
  }
  
  &__item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88rpx;
    font-size: 32rpx;
    color: var(--fu-text-color);
  }
}
</style> 